<?php
session_start();
require_once 'config.php';

// Dohvati id_nalog iz GET parametra (npr. ?id_nalog=123)
$id_nalog = isset($_GET['id_nalog']) ? intval($_GET['id_nalog']) : 0;

// Umjesto korištenja sesijske varijable, uvijek dohvatite najnoviji broj iz baze
$sql = "SELECT MAX(CAST(broj_troskovnika AS UNSIGNED)) AS maxBroj FROM nalog_troskovnik";
$result = $conn->query($sql);
$maxBroj = 0;
if ($result) {
    $row = $result->fetch_assoc();
    $maxBroj = isset($row['maxBroj']) ? $row['maxBroj'] : 0;
}
$nextBroj = $maxBroj + 1;

// Dohvati podatke iz tablica za padajuće izbornike
$grupaArtikala = [];
$sql = "SELECT id_grupe, naziv_grupe FROM grupa_artikala";
$result = $conn->query($sql);
if ($result) {
    while ($row = $result->fetch_assoc()) {
        $grupaArtikala[] = $row;
    }
}

$artikliData = [];
$sql = "SELECT sifra_artikla, naziv_artikla, jed_mjere, cijena, dobavljac, id_grupe FROM artikli";
$result = $conn->query($sql);
if ($result) {
    while ($row = $result->fetch_assoc()) {
        $artikliData[] = $row;
    }
}

$uslugeData = [];
$sql = "SELECT id_usluge, naziv_usluge, jed_mjere, cijena FROM usluge";
$result = $conn->query($sql);
if ($result) {
    while ($row = $result->fetch_assoc()) {
        $uslugeData[] = $row;
    }
}

$grupaArtikalaJSON = json_encode($grupaArtikala);
$artikliDataJSON = json_encode($artikliData);
$uslugeDataJSON = json_encode($uslugeData);

$conn->close();
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unos Troškovnika</title>
  <style>
    /* Opći stilovi */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f4f7f9;
      margin: 0;
      padding: 20px;
    }
    h2 {
      text-align: center;
      color: #333;
    }
    /* Kontejner za formu */
    form {
      background: #fff;
      max-width: 900px;
      margin: 20px auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    /* Stil za osnovne podatke */
    .podaci {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
      background: #fafafa;
    }
    .podaci h3 {
      margin-top: 0;
      color: #555;
    }
    .podaci label {
      display: block;
      margin-bottom: 10px;
      color: #555;
    }
    .podaci input[type="text"],
    .podaci input[type="date"],
    .podaci textarea {
      width: 100%;
      padding: 8px;
      margin-top: 4px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    /* Stilovi za tablice */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 10px;
    }
    table th, table td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }
    table th {
      background: #e9eff4;
    }
    /* Stil za rekapitulaciju */
    .rekap {
      font-weight: bold;
      margin-top: 10px;
      color: #333;
    }
    /* Stil za gumbe */
    button {
      background: #4285f4;
      color: #fff;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }
    button:hover {
      background: #357ae8;
    }
    /* Responsivni dizajn */
    @media (max-width: 600px) {
      table, .podaci, form {
        width: 100%;
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <h2>Unos Troškovnika</h2>
  <!-- Forma šalje podatke na spremi_troskovni.php -->
  <form method="POST" action="spremi_troskovni.php">
    <!-- Skriveno polje za ID naloga -->
    <input type="hidden" name="id_nalog" value="<?php echo $id_nalog; ?>">
    
    <!-- Osnovni podaci o troškovniku -->
    <div class="podaci">
      <h3>Osnovni podaci</h3>
      <label>
        Broj troškovnika:
        <input type="text" name="broj_troskovnika_display" value="<?php echo $nextBroj; ?>" readonly>
        <input type="hidden" name="broj_troskovnika" value="<?php echo $nextBroj; ?>">
      </label>
      <label>
        Datum:
        <input type="date" name="datum" required>
      </label>
      <label>
        Napomena:
        <textarea name="napomena"></textarea>
      </label>
    </div>

    <!-- Radnici -->
    <div class="section" id="radnici-section">
      <h3>Radnici</h3>
      <table>
        <thead>
          <tr>
            <th>Radnik</th>
            <th>Broj sati</th>
            <th>Cijena po satu</th>
            <th>Ukupno</th>
            <th>Akcija</th>
          </tr>
        </thead>
        <tbody id="radnici-container"></tbody>
      </table>
      <button type="button" onclick="dodajRadnika()">Dodaj radnika</button>
      <div class="rekap" id="radnici-rekap">Ukupno radnici: 0.00</div>
    </div>

    <!-- Vozila (sati) -->
    <div class="section" id="vozila-section">
      <h3>Vozila (sati)</h3>
      <table>
        <thead>
          <tr>
            <th>Vozilo</th>
            <th>Cijena po satu</th>
            <th>Količina (sati)</th>
            <th>Ukupno</th>
            <th>Akcija</th>
          </tr>
        </thead>
        <tbody id="vozila-container"></tbody>
      </table>
      <button type="button" onclick="dodajVozilo()">Dodaj vozilo</button>
      <div class="rekap" id="vozila-rekap">Ukupno vozila: 0.00</div>
    </div>

    <!-- Vozila (kilometri) -->
    <div class="section" id="vozila-km-section">
      <h3>Vozila (kilometri)</h3>
      <table>
        <thead>
          <tr>
            <th>Vozilo</th>
            <th>Cijena po kilometru</th>
            <th>Pređeno kilometara</th>
            <th>Ukupno</th>
            <th>Akcija</th>
          </tr>
        </thead>
        <tbody id="vozila-km-container"></tbody>
      </table>
      <button type="button" onclick="dodajVoziloKM()">Dodaj vozilo</button>
      <div class="rekap" id="vozila-km-rekap">Ukupno vozila KM: 0.00</div>
    </div>

    <!-- Artikli -->
    <div class="section" id="artikli-section">
      <h3>Artikli</h3>
      <table>
        <thead>
          <tr>
            <th>Grupa artikala</th>
            <th>Odabir artikla</th>
            <th>Naziv artikla</th>
            <th>Cijena</th>
            <th>Količina</th>
            <th>Ukupno</th>
            <th>Akcija</th>
          </tr>
        </thead>
        <tbody id="artikli-container"></tbody>
      </table>
      <button type="button" onclick="dodajArtikal()">Dodaj artikal</button>
      <div class="rekap" id="artikli-rekap">Ukupno artikli: 0.00</div>
    </div>

    <!-- Usluge -->
    <div class="section" id="usluge-section">
      <h3>Usluge</h3>
      <table>
        <thead>
          <tr>
            <th>Usluga</th>
            <th>Cijena</th>
            <th>Količina</th>
            <th>Ukupno</th>
            <th>Akcija</th>
          </tr>
        </thead>
        <tbody id="usluge-container"></tbody>
      </table>
      <button type="button" onclick="dodajUslugu()">Dodaj uslugu</button>
      <div class="rekap" id="usluge-rekap">Ukupno usluge: 0.00</div>
    </div>

    <div style="text-align: center; margin-top: 20px;">
      <button type="submit">Spremi troškovnik</button>
    </div>
  </form>

  <script>
    // Učitavanje podataka iz PHP-a
    var grupaArtikala = <?php echo $grupaArtikalaJSON; ?>;
    var artikliData = <?php echo $artikliDataJSON; ?>;
    var uslugeData = <?php echo $uslugeDataJSON; ?>;

    // Statistički podaci za radnike i vozila
    const radnici = `<option value="1">Marko Markovic</option><option value="2">Jovan Jovanovic</option>`;
    const vozila = `<option value="1">Mercedes Sprinter</option><option value="2">Fiat Ducato</option>`;

    // Funkcija za generiranje opcija za grupu artikala
    function getGrupaArtikalaOptions() {
      return grupaArtikala.map(function(grupa) {
        return `<option value="${grupa.id_grupe}">${grupa.naziv_grupe}</option>`;
      }).join("");
    }

    // Funkcija za generiranje opcija za artikle na temelju odabrane grupe
    function getArtikliOptions(idGrupa) {
      var filtriraniArtikli = artikliData.filter(function(art) {
        return art.id_grupe == idGrupa;
      });
      return filtriraniArtikli.map(function(art) {
        return `<option value="${art.sifra_artikla}" data-price="${art.cijena}" data-name="${art.naziv_artikla}">${art.sifra_artikla} - ${art.naziv_artikla}</option>`;
      }).join("");
    }

    // Funkcija za generiranje opcija za usluge
    function getUslugeOptions() {
      return uslugeData.map(function(usluga) {
        return `<option value="${usluga.id_usluge}" data-price="${usluga.cijena}" data-name="${usluga.naziv_usluge}">${usluga.naziv_usluge}</option>`;
      }).join("");
    }

    // Globalni brojači za redove
    var radniciCounter = 0;
    var vozilaCounter = 0;
    var vozilaKmCounter = 0;
    var artikliCounter = 0;
    var uslugeCounter = 0;

    function dodajRadnika() {
      let index = radniciCounter++;
      let html = `
      <tr>
        <td><select name="radnici[${index}][id_radnika]">${radnici}</select></td>
        <!-- Sada su type="text" umjesto type="number" -->
        <td><input type="text" class="sati" name="radnici[${index}][sati]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="cijena" name="radnici[${index}][cijena]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="ukupno" name="radnici[${index}][ukupno]" readonly></td>
        <td><button type="button" onclick="obrisiRed(this)">Obriši</button></td>
      </tr>`;
      document.getElementById("radnici-container").insertAdjacentHTML("beforeend", html);
      izracunajRekapitulaciju();
    }

    function dodajVozilo() {
      let index = vozilaCounter++;
      let html = `
      <tr>
        <td><select name="vozila[${index}][id_vozila]">${vozila}</select></td>
        <td><input type="text" class="cijena" name="vozila[${index}][cijena]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="sati" name="vozila[${index}][sati]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="ukupno" name="vozila[${index}][ukupno]" readonly></td>
        <td><button type="button" onclick="obrisiRed(this)">Obriši</button></td>
      </tr>`;
      document.getElementById("vozila-container").insertAdjacentHTML("beforeend", html);
      izracunajRekapitulaciju();
    }

    function dodajVoziloKM() {
      let index = vozilaKmCounter++;
      let html = `
      <tr>
        <td><select name="vozila_km[${index}][id_vozila]">${vozila}</select></td>
        <td><input type="text" class="cijena" name="vozila_km[${index}][cijena]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="sati" name="vozila_km[${index}][sati]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="ukupno" name="vozila_km[${index}][ukupno]" readonly></td>
        <td><button type="button" onclick="obrisiRed(this)">Obriši</button></td>
      </tr>`;
      document.getElementById("vozila-km-container").insertAdjacentHTML("beforeend", html);
      izracunajRekapitulaciju();
    }

    function dodajArtikal() {
      let index = artikliCounter++;
      let html = `
      <tr>
        <td>
          <select class="grupa_artikala" name="artikli[${index}][id_grupa]" onchange="updateArtikliDropdown(this)">
            ${getGrupaArtikalaOptions()}
          </select>
        </td>
        <td>
          <select class="odabir_artikla" name="artikli[${index}][id_artikla]" onchange="updateArtikalDetails(this)"></select>
        </td>
        <td>
          <select class="naziv_artikla" name="artikli[${index}][id_artikla_dummy]" onchange="updateArtikalDetails(this)"></select>
        </td>
        <!-- Sada su type="text" umjesto type="number" za cijenu i količinu -->
        <td><input type="text" class="cijena" name="artikli[${index}][cijena]" readonly></td>
        <td><input type="text" class="kolicina" name="artikli[${index}][kolicina]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="ukupno" name="artikli[${index}][ukupno]" readonly></td>
        <td><button type="button" onclick="obrisiRed(this)">Obriši</button></td>
      </tr>`;
      document.getElementById("artikli-container").insertAdjacentHTML("beforeend", html);
      let newRow = document.getElementById("artikli-container").lastElementChild;
      let grupaSelect = newRow.querySelector(".grupa_artikala");
      updateArtikliDropdown(grupaSelect);
      izracunajRekapitulaciju();
    }

    function dodajUslugu() {
      let index = uslugeCounter++;
      let html = `
      <tr>
        <td>
          <select class="usluga" name="usluge[${index}][id_usluge]" onchange="updateUslugaDetails(this)">
            ${getUslugeOptions()}
          </select>
        </td>
        <!-- Sada je type="text" umjesto type="number" -->
        <td><input type="text" class="cijena" name="usluge[${index}][cijena]" readonly></td>
        <td><input type="text" class="kolicina" name="usluge[${index}][kolicina]" oninput="izracunajUkupno(this)"></td>
        <td><input type="text" class="ukupno" name="usluge[${index}][ukupno]" readonly></td>
        <td><button type="button" onclick="obrisiRed(this)">Obriši</button></td>
      </tr>`;
      document.getElementById("usluge-container").insertAdjacentHTML("beforeend", html);
      let newRow = document.getElementById("usluge-container").lastElementChild;
      let uslugaSelect = newRow.querySelector(".usluga");
      updateUslugaDetails(uslugaSelect);
      izracunajRekapitulaciju();
    }

    function updateArtikliDropdown(selectElement) {
      const idGrupa = selectElement.value;
      const row = selectElement.closest("tr");
      const odabirSelect = row.querySelector(".odabir_artikla");
      const nazivSelect = row.querySelector(".naziv_artikla");

      const optionsHTML = getArtikliOptions(idGrupa);
      odabirSelect.innerHTML = optionsHTML;
      nazivSelect.innerHTML = optionsHTML;
      updateArtikalDetails(odabirSelect);
    }

    function updateArtikalDetails(selectElement) {
      const row = selectElement.closest("tr");
      const selectedOption = row.querySelector(".odabir_artikla").selectedOptions[0];
      if (selectedOption) {
        const price = parseFloat(selectedOption.getAttribute("data-price"));
        row.querySelector(".cijena").value = price.toFixed(2);
      } else {
        row.querySelector(".cijena").value = "0.00";
      }
      izracunajUkupno(selectElement);
    }

    function updateUslugaDetails(selectElement) {
      const row = selectElement.closest("tr");
      const selectedOption = selectElement.selectedOptions[0];
      if (selectedOption) {
        const price = parseFloat(selectedOption.getAttribute("data-price"));
        row.querySelector(".cijena").value = price.toFixed(2);
      } else {
        row.querySelector(".cijena").value = "0.00";
      }
      izracunajUkupno(selectElement);
    }

    // Funkcija za izračun dopušta zarez ili točku kao decimalni razdjelnik
    function izracunajUkupno(input) {
      var row = input.closest("tr");
      
      // Dohvati vrijednost iz polja za cijenu i zamijeni zarez s točkom
      var cijenaEl = row.querySelector(".cijena");
      var cijenaStr = cijenaEl ? cijenaEl.value : "0";
      cijenaStr = cijenaStr.replace(',', '.');
      var cijena = parseFloat(cijenaStr);
      
      // Dohvati vrijednost iz polja za količinu i zamijeni zarez s točkom
      var qtyInput = row.querySelector(".sati") || row.querySelector(".kolicina");
      var quantityStr = qtyInput ? qtyInput.value : "0";
      quantityStr = quantityStr.replace(',', '.');
      var quantity = parseFloat(quantityStr);
      
      var ukupno = cijena * quantity;
      var ukupnoEl = row.querySelector(".ukupno");
      if (ukupnoEl) {
        ukupnoEl.value = ukupno.toFixed(2);
      }
      izracunajRekapitulaciju();
    }

    function obrisiRed(button) {
      button.closest("tr").remove();
      izracunajRekapitulaciju();
    }

    function izracunajRekapitulaciju() {
      var radniciUkupno = Array.from(document.querySelectorAll("#radnici-container .ukupno"))
        .reduce(function(sum, input) { return sum + parseFloat(input.value || 0); }, 0);
      var vozilaUkupno = Array.from(document.querySelectorAll("#vozila-container .ukupno"))
        .reduce(function(sum, input) { return sum + parseFloat(input.value || 0); }, 0);
      var vozilaKmUkupno = Array.from(document.querySelectorAll("#vozila-km-container .ukupno"))
        .reduce(function(sum, input) { return sum + parseFloat(input.value || 0); }, 0);
      var artikliUkupno = Array.from(document.querySelectorAll("#artikli-container .ukupno"))
        .reduce(function(sum, input) { return sum + parseFloat(input.value || 0); }, 0);
      var uslugeUkupno = Array.from(document.querySelectorAll("#usluge-container .ukupno"))
        .reduce(function(sum, input) { return sum + parseFloat(input.value || 0); }, 0);

      document.getElementById("radnici-rekap").textContent = "Ukupno radnici: " + radniciUkupno.toFixed(2);
      document.getElementById("vozila-rekap").textContent = "Ukupno vozila: " + vozilaUkupno.toFixed(2);
      document.getElementById("vozila-km-rekap").textContent = "Ukupno vozila KM: " + vozilaKmUkupno.toFixed(2);
      document.getElementById("artikli-rekap").textContent = "Ukupno artikli: " + artikliUkupno.toFixed(2);
      document.getElementById("usluge-rekap").textContent = "Ukupno usluge: " + uslugeUkupno.toFixed(2);
    }
  </script>
</body>
</html>
